<template>
  <div class="goods">
    <el-row class="topw">
      <el-col :span="24">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>商品管理</el-breadcrumb-item>
          <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row style="padding:10px 0">
      <el-col :span="24">
        <!-- 给组件绑定原生事件的话，需要一个.native的修饰符 -->
        <el-input placeholder="请输入内容" class="search-input" v-model="query" @keydown.native.enter="initList">
          <el-button slot="append" icon="el-icon-search" @click="initList"></el-button>
        </el-input>
        <el-button type="success" plain  @click="addGoods">添加用户</el-button>
      </el-col>
    </el-row>
    <el-table class="margin-20" v-loading="loading" :data="goodsList" border style="width: 100%">
      <el-table-column type="index" label="编号" width="50">
      </el-table-column>
      <el-table-column prop="goods_name" label="商品姓名" width="300">
      </el-table-column>
      <el-table-column prop="goods_price" label="商品价格" width="120">
      </el-table-column>
      <el-table-column label="商品状态" width="120">
                <template slot-scope="scope"  prop="goods_state">
          <span>{{scope.row.goods_state | fmtLevel}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="goods_number" label="商品数量" width="120">
      </el-table-column>
      <el-table-column prop="add_time" label="创建时间" width="180">
      </el-table-column>
      <!-- <el-table-column label="用户状态">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.mg_state" @change="changeUserState(scope.row)"></el-switch>
        </template>
      </el-table-column> -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" plain icon="el-icon-edit" @click="showEditDialog(scope.row)">
          </el-button>
          <el-button size="mini" type="danger" plain icon="el-icon-delete" @click="showDeleteDialog(scope.row)">
          </el-button>
          <el-button size="mini" type="warning" plain icon="el-icon-check" @click="showGrantDialog(scope.row)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="1"
        :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
let moment = require("moment");
  import {
    getGoodsList,
  } from "@/api";
  export default {
    data() {
      return {
        goodsList: [],
        query: '',
        total: 0,
        pagesize: 10,
        pagenum: 1,
      }
    },
      filters: {
    fmtLevel (goods_state) {
      if (goods_state == 0) {
        return '未通过'
      } else if (goods_state == 1) {
        return '审核中'
      } else {
        return '已审核'
      }
    }
  },
    created() {
      this.initList()
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pagesize = val
        this.initList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.pagenum = val
        this.initList()
      },
      initList() {
        this.loading = true
        getGoodsList({
          params: {
            query: this.query,
            pagenum: this.pagenum,
            pagesize: this.pagesize
          }
        }).then(res => {
          console.log(res)
          this.goodsList = res.data.goods
          this.total = res.data.total
          this.loading = false
           this.goodsList.map((item, index) => {
             console.log(item)
             item.add_time = moment(item.add_time*1000).format('YYYY-MM-DD')
           })
        })
      },
      addGoods() {
        this.$router.push({
          name: 'addgoods'
        })
      },
    }
  }

</script>
<style lang="scss" scoped>
  .goods {
    .margin-20 {
      margin: 20px 0;
    }

    .search-input {
      width: 300px;
    }

    .page {
      padding: 5px 0;
      background-color: #D3DCE6;
    }
  }

</style>
